<template>
<div class="verify">
      <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">填写验证码</span>
        <span slot="more"></span>
        </LoginHeader>
        <div class="login_main">
            <p>你的手机{{this.$store.state.phonenum}}</p>
        <p>将收到一条4位数的验证码</p>
        <div class="userinput">
      <i class="el-icon-s-grid"></i>
      <!-- <el-input placeholder="输入4位验证码" clearable v-model="number">
  </el-input> -->
   <input placeholder="输入4位验证码" clearable v-model="number">
  </div>
  <el-button type="primary" v-if="time>0" disabled>{{time}}s之后重新获取</el-button>
  <el-button type="primary" v-else @click="retake">重新获取</el-button>
  <el-button :disabled="nextstep" type="primary" @click="submit">提交</el-button>
 <!-- @click="jumpverify" -->
        </div>
        </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
           number:'',
           time:15,
           code:'1234'
        }
    },
    mounted(){
        // this.$http.get('/api/code?phoneNum='+this.$store.state.phonenum)
        // .then(({
        //     data,config
        // })=>{
        //     console.log(data,config);
        //     if(data.msg=='ok'){
        //         this.code=data.code
        //     }else{
        //         this.$message.error('获取验证码失败')
        //     }
        // })
          let timer= setInterval(() => {
               this.time--;
           }, 1000);
    },
    destoryed(){
        clearInterval(timer);
    },
     computed:{
        nextstep(){
            if(this.number.length==4){
                return false
            }else{
                return true
            }
        }
    },
    components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        retake(){
            this.time=15
        },
        submit(){
            if(this.number==this.code){
                this.$router.push('/setpassword');
            }else{
                this.$message.error('验证码输入错误')
            }
        }
    }
}
</script>
<style lang="less" scoped>
.verify{
.login_main{
    p{
        margin-top: 20px;
        color: #cccccc;
    }
width: 70%;
    margin: 0px auto;
    text-align: center;
    >.userinput{
    margin: 100px 0 50px;
    border-bottom: 5px solid #dedede;
    >i{
        margin: 25px;
    }
    >input{
        // width: 80%;
        border: 0;
        outline: 0;
    }
}
}
.el-button{
    width: 70%;
    padding: 15px;
    border-radius: 30px;
    margin-top: 25px;
}
}

</style>